<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>veoplayer-demo</title>
    <link rel="icon" type="image/png" href="https://veoplaydoc.netlify.app/assets/images/logo.png">
    <style>
        html,
        body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        .btn-primary {
            margin-right: 38px;
            margin-top: 20px;
        }

        .opearbox {
            width: 665px;
            display: flex;
            flex-wrap: wrap;

        }

        .ex_container {
            margin-top: 20px;
            margin-left: 40px;
        }
    </style>
<!--    <link rel="stylesheet" href="./packages/style/style.css">-->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
</head>


<script src="https://cdn.bootcdn.net/ajax/libs/hls.js/1.4.0/hls.min.js"></script>
<body>
<div class="ex_container">
    <div id="test"></div>
    <div class="opearbox">
        <button type="button" class="btn btn-primary" id="screen">点击全屏</button>
        <button type="button" class="btn btn-primary" id="remove">销毁实例</button>
        <button type="button" class="btn btn-primary" id="playpause">播放/暂停</button>
    </div>
</div>
<div class="ex_container">
    <div id="test1"></div>
    <div class="opearbox">
        <button type="button" class="btn btn-primary" id="screen1">点击全屏</button>
        <button type="button" class="btn btn-primary" id="remove1">销毁实例</button>
        <button type="button" class="btn btn-primary" id="playpause1">播放/暂停</button>
        <button type="button" class="btn btn-primary" id="muted1">开启/关闭静音</button>
    </div>
</div>
<!--<script src="https://unpkg.com/veoplayer@1.0.1-beta/dist/veoplayer.global.min.js"></script>-->
<video id="videoMedia" style="display: block"></video>
</body>
<script type="module">
    // import VeoPlayer from './test/veoplayer.esm.js'
    import VeoPlayer from './dist/veoplayer.esm.min.js'

    let player = new VeoPlayer({
        // id: "test",
        id: document.querySelector("#test"),
        // url: "https://s.xlzys.com/play/RdGQ2yaD/index.m3u8",
        url: "http://localhost/一个人的武林【国语】.mp4",
        // url: "https://gcalic.v.myalicdn.com/gc/wgw05_1/index.m3u8?contentid=2820180516001",
        poster: "",
        // width: 665,
        // height: 440,
        // islive: true,
        muted: true,
        style: {
            themeColor: "#91CB40",
            processColor: "#91CB40",
            animation: true,
            processHeight: 8,
        },
        // playTime: 500,
        // volume: 50,
        // autoplay: true,
        speed: [5,2, 1.5, 1, 0.75],
        // setting: ["loop", "pip"],
        plugins: ["speed", "download", "setting", "capture"]
    })

    let players = new VeoPlayer({
        id: "test1",
        url: "https://wave.video/embed/649c405b5643bb14d8e353f2/649c409834723d0cb056053c.mp4",
        width: 665,
        height: 440,
        log: true,
        style: {
            themeColor: "#91CB40",
            processColor: "#91CB40",
            processHeight: 4,
            animation:true
        },
        // autoplay:true,
        // muted: true,
        anonymous: false,
        poster: "http://localhost:3000/static/demo.png",
        bokeh: "https://img1.imgtp.com/2023/06/29/Oq42MCme.png",
        // bokeh:{
        //     seconds:10
        // },
        // speed: [2, 1.5, 1, 0.75, 0.5],
        setting: ["loop", "pip"],
        plugins: ["speed", "download", "setting", "capture"]
    })
    // console.log(player)
    // 视频预加载
    player.veoLoadStart((e) => {
        // console.log("视频预加载", e);
    })
    // 视频加载完成
    player.veoLoaded((e) => {
        // console.log("视频加载完成", e);
    })
    // 视频缓冲
    player.veoProgressBuffer((e) => {
        // console.log("视频缓冲", e);
    })
    //时长改变
    player.veoTimeUpdate((e) => {

    })
    //播放结束
    player.veoPlayEnded((e) => {
        console.log("播放结束", e);
    })
    // 视频播放加载异常
    player.veoError((e) => {
        console.log("视频播放加载异常", e);
    })
    // 加载中
    player.veoWaiting((e) => {
        // console.log("加载中", e);
    })
    // 播放中
    player.veoPlaying((e) => {
        console.log("播放中", e);
    });
    // 音量改变
    player.veoVolumeChange((e) => {
        // console.log(e)
    })
    // 倍速改变
    player.veoSpeedChange((e) => {
        console.log(e)
    })
    document.querySelector("#screen1").onclick = () => {
        player.veoScreen(true)
    }
    document.querySelector("#remove1").onclick = () => {
        player.veoDestroy(true)
    }
    let isPlay = false
    document.querySelector("#playpause1").onclick = () => {
        isPlay = !isPlay
        if (isPlay) {
            player.veoPlay()
        } else {
            player.veoPause()
        }
    }
    let isMuted = false
    document.querySelector("#muted1").onclick = () => {
        isMuted = !isMuted
        player.veoIsMuted(isMuted)
    }
</script>

<script>
    // navigator.mediaDevices.getUserMedia({audio: true, video: true})
    //     .then(data => {
    //         let video = document.querySelector(".veo-video video")
    //         video.srcObject = data
    //         video.onloadedmetadata = () => {
    //             video.play();
    //         };
    //     })
    //     .catch(e => {
    //         console.log("error:", e);
    //     });
</script>

</html>
